<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form id="userForm">
    <div>
      <label for="bookname">图书名称：</label>
      <input type="text" name="bookname" id="bookname">
    </div>
    <div>
      <label for="author">图书作者：</label>
      <input type="text" name="author" id="author">
    </div>
    <div>
      <label for="publisher">图书出版社：</label>
      <input type="text" name="publisher" id="publisher">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script type="text/javascript" src="./lib/jquery.js"></script>
  <script type="text/javascript">

    // 表单提交默认就会触发一个submit事件
    $('#userForm').on('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()
      // 现在可以通过Ajax方式提交表单
      // var bookname = $('#bookname').val()
      // var author = $('#author').val()
      // var publisher = $('#publisher').val()
      // $.post('http://www.liulongbin.top:3006/api/addbook', {
      //   bookname: bookname,
      //   author: author,
      //   publisher: publisher
      // }, function (res) {
      //   console.log(res)
      // })
      
      // jQuery提供了一种快速获取所有表单输入域数据的方法
      // 这里的this指的是form标签
      var formData = $(this).serialize()
      // var formData = $('#userForm').serialize()
      $.post('http://www.liulongbin.top:3006/api/addbook', formData, function (res) {
        console.log(res)
      })
      // return false
    })
  </script>
</body>
</html>